<script setup lang="tsx">
import { ref, reactive, unref, provide } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { useSearch } from '@/hooks/web/useSearch'
import { BaseButton } from '@/components/Button'
import { ElButton, ElDialog, ElMessage } from 'element-plus'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { getListApi, passApi, rejectApi, type Row } from '@/api/finance/withdrawal'
import { searchDriverApi } from '@/api/utils/search'
const dialogFormVisible = ref(false)
defineOptions({
  name: 'Withdrawal'
})
const { searchRegister, searchMethods } = useSearch()
const { setSchema } = searchMethods
const searchUser = async (query) => {
  if (query && Object.values(query).every((item) => item !== '')) {
    setSchema([
      {
        field: 'deliver_driver_id',
        path: 'componentProps.loading',
        value: true
      }
    ])
    const params = {
      ...query,
      field: 'id,name'
    }
    const res = await searchDriverApi(params)
    if (res) {
      setSchema([
        {
          field: 'deliver_driver_id',
          path: 'componentProps.options',
          value: res.data.list.map((item) => {
            return {
              label: item.name,
              value: item.id
            }
          })
        }
      ])
    }
    setSchema([
      {
        field: 'deliver_driver_id',
        path: 'componentProps.loading',
        value: false
      }
    ])
  }
}
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true },
    type: 'selection'
  },
  {
    field: 'no',
    label: '提现编号',
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'create_time',
    label: '关联账户编号',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'deliver_driver_id',
    label: '姓名',
    search: {
      component: 'Select',
      componentProps: {
        placeholder: '支持模糊搜索',
        filterable: true,
        remote: true,
        loading: false,
        remoteMethod: (name) => searchUser({ name }),
        options: [],
        on: {
          change: (val) => {
            searchParams.value.deliver_driver_id = val
          }
        }
      }
    },
    form: { hidden: true },
    detail: { hidden: true },
    formatter: (cellValue) => {
      return cellValue.driver_name
    }
  },
  {
    field: 'amount',
    label: '提现金额',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'status',
    label: '审核状态',
    search: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '待审核',
            value: 1
          },
          {
            label: '已审核',
            value: 2
          },
          {
            label: '已拒绝',
            value: 3
          }
        ]
      }
    },
    form: { hidden: true },
    detail: { hidden: true },
    formatter: (cellValue) => {
      return cellValue.driver_withdraw_status_text
    }
  },
  {
    field: 'audit_time',
    label: '审核时间',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true },
    formatter: (cellValue) => {
      return cellValue.audit_time ? cellValue.audit_time : ''
    }
  }
])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas)
const ids = ref<string[]>([])

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getListApi({
      page: unref(currentPage),
      limit: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list,
      total: res.data.count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, getElTableExpose } = tableMethods
let currentRow = reactive<any>({})

// 审核
const Auditing = async () => {
  const elTableExpose = await getElTableExpose()
  ids.value = elTableExpose?.getSelectionRows().map((v: Row) => v.id) || ''
  if (Object.keys(ids.value).length === 0) {
    ElMessage('请选择')
    return
  } else if (Object.keys(ids.value).length >= 2) {
    ElMessage('只能选择一个')
    return
  }
  dialogFormVisible.value = true
}
// 通过
const adopt = async () => {
  const res = await passApi({ id: unref(ids.value).join(',') })
  if (res) {
    ElMessage.success(res.msg)
    dialogFormVisible.value = false
    getList()
  }
}
// 拒绝
const refuse = async () => {
  const res = await rejectApi({ id: unref(ids.value).join(',') })
  if (res) {
    ElMessage.success(res.msg)
    dialogFormVisible.value = false
    getList()
  }
}
provide('currentRow', currentRow)
</script>

<template>
  <ContentWrap title="提现记录">
    <Search
      @register="searchRegister"
      :schema="allSchemas.searchSchema"
      @search="setSearchParams"
      @reset="setSearchParams"
    />

    <div class="mb-10px">
      <BaseButton type="primary" @click="Auditing">审核</BaseButton>
    </div>

    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{ total }"
      @register="tableRegister"
    />
    <el-dialog v-model="dialogFormVisible" title="温馨提示" width="500">
      <span>同意还是拒绝？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="adopt">通过</el-button>
          <el-button type="primary" @click="refuse"> 拒绝</el-button>
        </div>
      </template>
    </el-dialog>
  </ContentWrap>
</template>
